<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>
    用户名：<input type="text" id="username">
</p>
<p>
    密码：<input type="password" id="password">
</p>
<p>
    <span id="message"></span>
</p>
<p>
    <button>登录</button>
</p>

<script>

    let usernameElement = document.querySelector('#username');
    let passwordElement = document.querySelector('#password');
    let buttonElement = document.querySelector('button');
    let messageElement = document.querySelector('#message');

    buttonElement.onclick = function() {
        let xhr = new XMLHttpRequest();

        xhr.open('post', '/login');

        xhr.onload = function() {
            // console.log(this.responseText);
            console.log(this.status);
            if (this.status <200 || this.status > 200) {
                messageElement.innerHTML = this.responseText;
                messageElement.style.color = 'red';
            } else {
                messageElement.style.color = 'green';
                messageElement.innerHTML = '登录成功';
            }
        }


        // xhr.setRequestHeader('Content-Type', 'application/json');
        // xhr.send(JSON.stringify({
        //     username: usernameElement.value,
        //     password: passwordElement.value
        // }));

        // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // xhr.send(`username=${usernameElement.value}&password=${passwordElement.value}`);


        // 如果我们提交的 formdata 格式，那么我们可以利用一个对象 FormData 对象
        // let fd = new FormData();
        // fd.append('username', usernameElement.value);
        // fd.append('password', passwordElement.value);
        //
        // xhr.send(fd);


        xhr.setRequestHeader('Content-Type', 'kkb/zmouse');
        xhr.send('username=>zmouse!!开课吧万岁!!password=>123');
    }

</script>

</body>
</html>
